<template>
  <div class="containerPreview">
    <!-- <mavon-editor v-model="value" @change="changeData" /> -->
    <!-- <Nav :isLogin="isLogin" :selfUserInfo="selfUserInfo"></Nav> -->
    <!-- <div class="articleLeft"> -->
    <!-- <div class="itemIcon" @click="toSupport">
        <span class="num">{{ previewDetail.likesNum }}</span>
        <span class="iconfont icon-dianzan"></span>
      </div>
      <div class="itemIcon">
        <span class="iconfont icon-dianzan"></span>
      </div>
      <div class="itemIcon">
        <span class="iconfont icon-dianzan"></span>
      </div> -->
    <!-- </div> -->
    <div
      class="contentBox"
      v-bind:style="{ marginLeft: isShowNavigation ? '280px' : '0' }"
    >
      <div class="articleUser">
        <a href="">
          <img :src="otherUserInfo.url" alt="" />
        </a>
        <div class="userNametime">
          <div class="username">{{ otherUserInfo.nickname }}</div>
          <div class="articleTime">
            <span>{{ $utils.timeRight(previewDetail.createdAt) }}</span
            >&nbsp;&nbsp;&nbsp;
            <span>阅读 {{ previewDetail.previewNumber }}</span>
          </div>
        </div>
        <!-- <el-button type="success" class="isFollow">关注</el-button> -->
      </div>
      <!-- <h1 class="articleTitle">{{ previewDetail.articleTitle }}</h1> -->
      <mavon-editor
        :navigation="true"
        :toolbarsFlag="true"
        defaultOpen="preview"
        :subfield="false"
        ref="previewMavon"
        v-model="previewDetail.content"
        :codeStyle="previewDetail.codeSty"
        @navigationToggle="navigationToggle"
        :toolbars="toolbars"
      />
    </div>
    <!-- <div class="articleRight">
      <AboutUser :userDetail="otherUserInfo" />
      <DownloadCient />
      <AboutArticle />
    </div> -->
  </div>
</template>

<script>
import Nav from "@component/Nav.vue"
import AboutUser from "@component/Article/AboutUser.vue"
import DownloadCient from "@component/Article/DownloadClient.vue"
import AboutArticle from "@component/Article/AboutArticle.vue"
export default {
  components: {
    AboutUser,
    DownloadCient,
    AboutArticle,
    Nav,
  },
  props: {},
  data() {
    return {
      toolbars: {
        readmodel: true, // 沉浸式阅读
        navigation: true, // 导航目录
      },
      contentId: "",
      previewDetail: {
        content: "",
        codeSty: "agate",
        articleTitle: "",
      },
      isLogin: false,
      isLoding: true,

      otherUserInfo: {
        url: "",
      },
      selfUserInfo: {},
      isShowNavigation: true,
    }
  },
  watch: {},
  computed: {},
  methods: {
    navigationToggle(navigationFlag) {
      console.log(`navigationFlag`, navigationFlag)
      this.isShowNavigation = navigationFlag
      this.$forceUpdate()
    },
    toSupport() {
      this.$http
        .get("/article/supportArticle", {
          params: {
            id: this.contentId,
          },
        })
        .then((result) => {
          console.log(`result`, result)
          if (result.data.status === "SUCCESS") {
            this.previewDetail.likesNum++
          }
        })
    },
  },
  created() {
    this.otherUserInfo = JSON.parse(
      window.localStorage.getItem("otherUserInfo")
    )
    let userInfo = window.localStorage.getItem("userInfo")
    if (userInfo) {
      this.selfUserInfo = JSON.parse(userInfo)
      this.isLogin = true
    }
    this.contentId = this.$route.query.contentId
    this.$http
      .get("/article/getArticPreview", {
        params: {
          contentId: this.contentId,
        },
      })
      .then((result) => {
        console.log(`result`, result)
        if (result.data.status === "fail") {
          return this.$message.error(result.data.msg)
        }
        this.isLoding = false
        this.previewDetail = result.data.result[0]
      })
  },
  mounted() {},
  beforeDestroy() {
    // window.localStorage.removeItem("otherUserInfo")
  },
}
</script>
<style lang="less">
// @import "../../assets/css/index.less";
.v-note-wrapper {
  height: calc(100vh - 90px);
}
.containerPreview {
  width: 100vw;
  display: flex;
  // margin-top: 7.3rem;
}
::-webkit-scrollbar {
  width: 0px;
}
.articleLeft {
  // width: 279px;

  z-index: 2;
  border-right: #909090 1px solid;
  .itemIcon {
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 4%);
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: #fff;
    line-height: 36px;
    text-align: center;
    margin-top: 1rem;
    position: relative;
    .num {
      position: absolute;
      display: block;
      top: -7px;
      left: 25px;
      height: 17px;
      padding: 0 4px;
      font-size: 12px;
      line-height: 19px;
      background-color: #b2bac2;
      min-width: 30px;
      color: #fff;
      border-radius: 0.7rem;
    }
    .iconfont {
      font-size: 18px;
      color: #86909c;
    }
  }
}
.articleTitle {
  font-size: 32px;
  margin-bottom: 20px;
}
.shadow {
  box-shadow: none !important;
}
.v-left-item {
  display: none;
}
.v-right-item {
  text-align: left !important;
  margin-bottom: 10px;
}
.contentBox,
.skeleton {
  transition: 0.2s;
  background-color: #fff;
  flex: 1;
  min-width: 800px;
  padding: 2rem;
  overflow: hidden;
  height: 100vh;
  padding-right: 0px;
}
// 导航目录
.v-note-wrapper {
  .v-note-panel {
    .v-note-navigation-wrapper {
      width: 279px !important;
      position: fixed !important;
      left: 0 !important;
      right: auto !important;
      top: auto !important;
    }
    .transition {
      transition: width 0.3s !important;
    }
  }
}

.articleRight {
  flex: 1;
  margin-left: 1.7rem;
}
/* 用户信息展示 */
.articleUser {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
}
.articleUser img {
  flex: 0 0 auto;
  margin-right: 1rem;
  width: 3.333rem;
  height: 3.333rem;
  border-radius: 50%;
}
.userNametime {
  flex: 1;
}
.userNametime .username {
  height: 22px;
  font-weight: 700;
  color: #333;
}
.userNametime .articleTime {
  font-size: 1.1rem;
  color: #909090;
  margin-top: 0.25rem;
}
.isFollow {
  margin: 0 0 0 auto;
  width: 60px;
  height: 30px;
  padding: 0;
  line-height: 30px;
  text-align: center;
  font-size: 13px;
  border: 1px solid #6cbd45;
  color: #6cbd45;
  background-color: #fff;
}
pre {
  padding: 0 !important;
}
</style>
